<template>
    <div class=" header main">
        <span id="header">
            <span>
                <span>{{mname}}</span>
                <el-button type="primary" plain v-if="this.principal === null" @click="dd1()" style="height: 37px;width: 70px">登录</el-button>
                <el-button type="info" plain v-else @click="output()" style="height: 37px;width: 70px">注销</el-button>
            </span>
        </span>
        <div style="width: 80%">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                     active-text-color="red"
                     style="font-weight:bold">
                <el-menu-item index="1" @click="$router.push('/shouye')">首页</el-menu-item>
                <el-menu-item index="2" @click="$router.push('/product')">商品展示</el-menu-item>
                <el-menu-item index="3" @click="$router.push('/activity')">专享活动</el-menu-item>
                <el-menu-item index="4" @click="$router.push('/shoppingCart')">购物车</el-menu-item>
                <el-menu-item index="5" @click="$router.push('/personalCenter')">个人中心</el-menu-item>
            </el-menu>
        </div>

        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tbody>
            <tr>
                <td class="topb">
                    <img src="../assets/img/1001.jpg" width="100%">
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: "Shouye",
        data () {
            return {
                principal: sessionStorage.getItem("token"),
                mname:'已登录',
                list:null,
                activeIndex: '1',

            };
        },
        created() {
            if (this.principal === null){
                this.mname = "未登录"
            }
        },
        methods: {
            handleSelect (key, keyPath) {
                console.log(key, keyPath);
            },
            dd1(){
                this.$router.push('/login')
            },
            output(){
                this.$router.replace('shouye')
                sessionStorage.clear()
                localStorage.clear()
                this.$router.go(0)
            },
        },
    }
</script>

<style scoped>

    .topb{
        border-top: 2px solid red ;
    }
    #header
    {
        position: absolute;
        top: 25px;
        bottom: auto;
        left: -5px;
        width: 100%;
        height: 38px;
        overflow: hidden;
    }
    /* Header's buttons. */
    #header > span
    {
        float: right;
        width: 200px;
    }
    #header > span > button
    {
        position: absolute;
    }
    #header > span > span
    {
        padding: 0px 8px 16px 0px;
        line-height: 40px;
    }

</style>
